<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi"
    />
    <link rel="icon" type="image/png" href="images/favicon.png" />
    <link rel="stylesheet" href="css/fxotary-icon.css" />
    <link rel="stylesheet" href="css/font-awesome-pro.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/slick.css" />
    <link rel="stylesheet" href="css/spacing.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/responsive.css" />
    <title>Fxotary</title>
  </head>
  <body>
    <!--================================
        PRELOADER START
    =================================-->
    <div class="preloader">
      <svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
        <path id="svg" d="M0,1005S175,995,500,995s500,5,500,5V0H0Z"></path>
      </svg>
      <h5 class="preloader-text">Fxotary</h5>
    </div>
    <!--================================
        PRELOADER END
    =================================-->

    <!--===============================
        MAIN MENU START
    ===============================-->
    <header>
      <div class="main_menu navbar d-none d-xl-flex">
        <div class="container-fluid">
          <a href="index.html" class="navbar-brand">
            <img src="images/logo.png" alt="Fxotary" class="img-fluid w-100" />
          </a>
          <div class="main-menu">
            <nav class="navbar-nav m-auto" id="navbarNav">
              <ul>
                <li class="dropdown-nav">
                  <a href="#" class="text_hover_animaiton">Home</a>
                  <ul class="submenu">
                    <li><a href="index.html">Home 1</a></li>
                    <li><a href="index_2.html">Home 2</a></li>
                  </ul>
                </li>
                <li>
                  <a href="about_us.html" class="text_hover_animaiton">About</a>
                </li>
                <li class="dropdown-nav">
                  <a href="#" class="text_hover_animaiton">Pages</a>
                  <ul class="submenu">
                    <li class="dropdown-nav">
                      <a href="#">Services</a>

                      <ul class="submenu">
                        <li><a href="services.html">Service List</a></li>
                        <li>
                          <a href="service_details.html">Service Details</a>
                        </li>
                      </ul>
                    </li>
                    <li class="dropdown-nav">
                      <a href="#">Portfolio</a>
                      <ul class="submenu">
                        <li><a href="portfolio.html">Portfolio List</a></li>
                        <li><a href="portfolio_2.html">Portfolio Grid</a></li>
                        <li>
                          <a href="portfolio_details.html">Portfolio Details</a>
                        </li>
                      </ul>
                    </li>
                    <li><a href="team_page.html">Team List</a></li>
                    <li><a href="error.html">404</a></li>
                  </ul>
                </li>
                <li class="dropdown-nav">
                  <a href="#" class="text_hover_animaiton">Blog</a>
                  <ul class="submenu">
                    <li><a href="blog_grid.html">Blog Grid</a></li>
                    <li><a href="blog_list.html">Blog List</a></li>
                    <li><a href="blog_details.html">Blog Details</a></li>
                  </ul>
                </li>
                <li>
                  <a href="contact.html" class="text_hover_animaiton"
                    >Contact</a
                  >
                </li>
              </ul>
            </nav>
          </div>
          <div class="right_menu">
            <a href="#" class="search_icon"
              ><i class="fa-sharp fa-regular fa-magnifying-glass"></i
            ></a>
            <a href="contact.html" class="common_btn">Request Quote</a>
          </div>
        </div>
      </div>
      <div class="mobile-menu d-xl-none main_menu d-flex">
        <div class="container-fluid d-flex justify-content-between">
          <div class="d-flex align-items-center justify-content-between w-100">
            <div class="navbar-brand ms-3">
              <a href="index.html"
                ><img
                  src="images/logo.png"
                  alt="Fxotary"
                  class="img-fluid w-100"
              /></a>
            </div>
            <div class="text-end me-3">
              <a class="menu-bar navbar-toggler" href="javascript:void(0)"
                ><i class="fa-solid fa-bars"></i
              ></a>
            </div>
          </div>
        </div>
      </div>

      <div class="mobile_menu_container">
        <div class="mobile_menu_content">
          <div class="d-flex align-items-center justify-content-between">
            <div class="navbar-brand">
              <a href="index.html"
                ><img
                  src="images/logo.png"
                  alt="Fxotary"
                  class="img-fluid w-100"
              /></a>
            </div>
            <div class="close_btn">
              <button><i class="fal fa-times"></i></button>
            </div>
          </div>
          <div class="main-menu-mobile"></div>
        </div>
      </div>
    </header>
    <div class="menu_search">
      <form>
        <input type="text" placeholder="Search" />
        <button type="submit">Search</button>
        <span class="close_search c-pointer"
          ><i class="fa-sharp fa-light fa-xmark"></i
        ></span>
        <i class="icon-down-arrow"></i>
      </form>
    </div>
    <div class="body-overlay"></div>
    <!--===============================
        MAIN MENU END
    ===============================-->

    <!--===============================
        BLOG DETAILS START
    ===============================-->
    <section class="tf__blog_details mt_190 xs_mt_150">
      <div class="container">
        <div class="row justify-content-between">
          <div class="col-lg-5 col-md-5">
            <div class="section_heading">
              <h5 id="FD00220">OUR PORTFOLIO</h5>
              <h2 class="banner_title" id="FD00221">Modern Grid</h2>
            </div>
          </div>
          <div class="col-lg-5 col-md-7">
            <div class="tf__portfolio_page_text">
              <p id="FD00222">
                Lorem ipsum dolor sit amet consectetur adipiscing elit viverra
                purus senectus sapien habitant rutrum himenaeos curabitur
                posuere congue ac non eu odio tempor placerat id.
              </p>
            </div>
          </div>
          <div class="col-xl-12">
            <div class="tf__blog_details_img">
              <div data-animation="img-blur" data-delay="0" data-scroll="0">
                <img
                  src="images/futured_work_img_9.jpg"
                  alt="blog details"
                  class="img-fluid w-100"
                  id="FD00223"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="row justify-content-between">
          <div class="col-xxl-7 col-lg-8">
            <div class="tf__blog_details_text">
              <div class="tf__featured_work_item mt-0">
                <h3 class="mt-0" data-text-animation data-split="word" id="FD00224">
                  Website Design 2024
                </h3>
                <p id="FD00225">Website Design / Brand</p>
              </div>
              <p id="FD00226">
                Lorem ipsum dolor sit amet consectetur adipiscing elit viverra
                purus senectus sapien habitant rutrum himenaeos curabitur
                posuere congue ac non eu odio tempor placerat id. Lorem ipsum
                dolor sit amet consectetur adipiscing elit viverra purus
                senectus sapien habitant rutrum himenaeos curabitur posuere
                congue ac non eu odio tempor placerat id. Lorem ipsum dolor sit
                amet consectetur adipiscing elit viverra purus senectus sapien
                habitant
              </p>
              <p id="FD00227">
                Lorem ipsum dolor sit amet consectetur adipiscing elit viverra
                purus senectus sapien habitant rutrum himenaeos curabitur
                posuere congue ac non eu odio tempor placerat id. Lorem ipsum
                dolor sit amet consectetur adipiscing elit viverra purus
                senectus sapien habitant
              </p>
            </div>
          </div>
          <div class="col-xxl-4 col-lg-4">
            <div class="project_details_info" id="FD00228">
              <h4>Project Details</h4>
              <ul>
                <li>
                  <h5>Name:</h5>
                  <p>Surgery</p>
                </li>
                <li>
                  <h5>Author:</h5>
                  <p>Dr.Rajin Saleh</p>
                </li>
                <li>
                  <h5>Date:</h5>
                  <p>23 December,2022</p>
                </li>
                <li>
                  <h5>Tags:</h5>
                  <p>Medical,Operation</p>
                </li>
                <li class="project_details_info_value">
                  <h5>Value:</h5>
                  <p>$240</p>
                </li>
                <li>
                  <p class="rating">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--===============================
        BLOG DETAILS END
    ===============================-->

    <!--===============================
        PORTFOLIO PAGE START
    ===============================-->
    <section class="tf__portfolio_page pt_100 xs_pt_70">
      <div class="container">
        <div class="row mt_60 justify-content-between grid" id="FD00229">
          <div class="col-xl-6 col-md-6 grid_item">
            <div class="tf__featured_work_item tf__featured_work_item_small">
              <a href="#" class="cursor-arrow tf__featured_work_item_img">
                <div data-animation="img-blur">
                  <img
                    src="images/futured_work_img_5.jpg"
                    alt="futured"
                    class="img-fluid w-100"
                  />
                </div>
              </a>
              <h3 data-text-animation data-split="line" data-duration=".5">
                Corporate Website
              </h3>
              <p>Website Design / Brand</p>
            </div>
          </div>
          <div class="col-xl-6 col-md-6 grid_item">
            <div class="tf__featured_work_item">
              <a href="#" class="cursor-arrow tf__featured_work_item_img">
                <div data-animation="img-blur">
                  <img
                    src="images/futured_work_img_3.jpg"
                    alt="futured"
                    class="img-fluid w-100"
                  />
                </div>
              </a>
              <h3 data-text-animation data-split="line" data-duration=".5">
                Website Design 2024
              </h3>
              <p>Website Design / Brand</p>
            </div>
          </div>
          <div class="col-xl-6 col-md-6 grid_item">
            <div class="tf__featured_work_item">
              <a href="#" class="cursor-arrow tf__featured_work_item_img">
                <div data-animation="img-blur">
                  <img
                    src="images/futured_work_img_4.jpg"
                    alt="futured"
                    class="img-fluid w-100"
                  />
                </div>
              </a>
              <h3 data-text-animation data-split="line" data-duration=".5">
                Cartoon Animation
              </h3>
              <p>Website Design / Brand</p>
            </div>
          </div>
          <div class="col-xl-6 col-md-6 grid_item">
            <div class="tf__featured_work_item tf__featured_work_item_small">
              <a href="#" class="cursor-arrow tf__featured_work_item_img">
                <div data-animation="img-blur">
                  <img
                    src="images/futured_work_img_5.jpg"
                    alt="futured"
                    class="img-fluid w-100"
                  />
                </div>
              </a>
              <h3 data-text-animation data-split="line" data-duration=".5">
                Corporate Website
              </h3>
              <p>Website Design / Brand</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--===============================
       PORTFOLIO PAGE END
   ===============================-->

    <!--===============================
        QUESTION START
    ===============================-->
    <section
      class="tf__question pt_100 xs_pt_70 pb_100 xs_pb_70"
      data-animation
    >
      <div class="container">
        <div class="row">
          <div class="col-12">
            <a
              href="contact.html"
              data-cursor='<i class="fa-light fa-envelope"></i>'
              class="tf__question_text"
            >
              <h2>Have any <span>project?</span></h2>
            </a>
          </div>
        </div>
      </div>
    </section>
    <!--===============================
        QUESTION END
    ===============================-->

    <!--===============================
        FOOTER START
    ===============================-->
    <footer class="pt_120 xs_pt_80">
      <div class="container">
        <div class="row justify-content-between" id="foot">
          <div class="col-xl-4 col-sm-8 col-md-6 col-lg-4">
            <div class="footer_content">
              <a class="footer_logo" href="index.html">
                <img
                  src="images/footer_logo.jpg"
                  alt="Fxotary"
                  class="img-fluid w-100"
                />
              </a>
              <p>
                Qorem ipsum dolor sit amet, consectetur adipiscing elit aut elit
                tellus luctus nec ulla corper mattis aulvinar daibus leo.
              </p>
              <!-- <form>
                <input type="text" placeholder="ENTER YOUR EMAIL" />
                <button type="submit">
                  <i class="fx-icon-next-arrow"></i>
                </button>
              </form> -->
              <ul class="d-flex flex-wrap">
                <li>
                  <a href="#"><i class="fab fa-facebook-f"></i></a>
                </li>
                <li>
                  <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </li>
                <li>
                  <a href="#"><i class="fab fa-twitter"></i></a>
                </li>
                <li>
                  <a href="#"><i class="fab fa-pinterest-p"></i></a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-xl-2 col-sm-3 col-md-6 col-lg-2">
            <ul class="footer_menu">
              <li>
                <a
                  href="index.html"
                  class="text_hover_animaiton text_hover_type_2"
                  >Home</a
                >
              </li>
              <li>
                <a
                  href="portfolio.html"
                  class="text_hover_animaiton text_hover_type_2"
                  >Portfolio</a
                >
              </li>
              <li>
                <a
                  href="services.html"
                  class="text_hover_animaiton text_hover_type_2"
                  >Services</a
                >
              </li>
              <li>
                <a
                  href="contact.html"
                  class="text_hover_animaiton text_hover_type_2"
                  >Contact</a
                >
              </li>
              <li>
                <a
                  href="blog_grid.html"
                  class="text_hover_animaiton text_hover_type_2"
                  >Blog</a
                >
              </li>
            </ul>
          </div>
          <div class="col-xl-2 col-md-6 col-lg-3">
            <div class="footer_address">
              <h3>Address</h3>
              <p>33 Road Broklyn Street, 600 New York, USA</p>
              <p>2972 Westheimer Rd. Santa Ana, Illinois 85486</p>
            </div>
          </div>
          <div class="col-xl-2 col-md-6 col-lg-3">
            <div class="footer_address">
              <h3>Contact</h3>
              <p>
                <a href="mailto:needhelp@company.com">needhelp@company.com</a>
                <a href="callto:+926668880000">+92 (666) 888 0000</a>
              </p>
              <p>
                <a href="mailto:needhelp@company.com">youmail@company.com</a>
                <a href="callto:+926668880000">+80 (222) 888 11110</a>
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="footer_copyright">
              <p>Copyright © 2024 Codeefly. All rights by <a href="https://www.bootstrapmb.com">bootstrapMB</a>.</p>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!--===============================
        FOOTER END
    ===============================-->

    <!--==============================
        SCROLL BUTTON START
    ===============================-->
    <div class="tf__scroll_btn"><i class="far fa-long-arrow-up"></i></div>
    <!--==============================
        SCROLL BUTTON END
    ===============================-->
    <div id="magic-cursor">
      <div id="ball"></div>
    </div>
  </body>
</html>


<script src="./js/plugin.js"></script>
<script src="./js/animation.js"></script>
<script src="./js/main.js"></script>
<script src="js/jquery.js"></script>
<script src="js_cus/view.js"></script>
<script src="js_cus/portfolio.js"></script>
<script type="text/javascript">
  (function () {
    getPortfolioDetail();
  })(jQuery);
</script>